<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
	<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<title>国庆节</title>
	<link rel="stylesheet" href="css/index.css">
	<script src="js/index.js"></script>
</head>
<body>
	<div class="body">
		<li>
			<div class="body-font-left">
				<img src="image/logo.jpg" width="80" height="100">
				<img src="image/moon_play.png" width="40" height="40" class="icon-img">
			</div>
			<div class="body-font-right">
				<span class="body-font-text">《转折年代：中国的1947年》</span>
				<span class="body-font-author">作者：金冲及</span>
				<span class="body-font-important">人心向背，是最终能左右一切的决定性力量</span>
			</div>
		</li>
		<li>
			<div class="body-font-left">
				<img src="image/logo1.jpg" width="80" height="100">
				<img src="image/moon_play.png" width="40" height="40" class="icon-img">
			</div>
			<div class="body-font-right">
				<span class="body-font-text">《苍茫大地主沉浮》</span>
				<span class="body-font-author">作者：中共中央党史研究第一研究部</span>
				<span class="body-font-important">我们不但善于破坏一个旧世界，而且善于建设一个新世界</span>
			</div>
		</li>
		<li>
			<div class="body-font-left">
				<img src="image/logo1.jpg" width="80" height="100">
				<img src="image/moon_play.png"  width="40" height="40" class="icon-img">
			</div>
			<div class="body-font-right">
				<span class="body-font-text">《重读抗战家书》</span>
				<span class="body-font-author">作者：中共中央宣传部宣传教育局</span>
				<span class="body-font-important">聆听沙场绝笔，体会烽烟岁月。</span>
			</div>
		</li>
		<audio controls="" src="" id="ado" style="display: none;"></audio>
	</div>
	
</body>
</html>
<script>
// 定义变量 获取所有的属性
var lis=document.getElementsByTagName('li');
var ado=document.getElementById('ado');
// 定义一个数组用来存放音频文件
var arr=[
	'video/axin.mp3',
	'video/demo.mp3',
	'video/zhe.mp3'
];
// 循环，作用实现可以利用数组值来获取数据  这个的i是用来获取所有的li标签
for(var i = 0; i<lis.length;i++){
	// 对每个li标签添加点击事件
	lis[i].onclick=function(){
		// jquery写法，获取播放图片，attr进行替换
		$('.icon-img').attr('src','image/moon_play.png');
		// 这个的i是用来添加点击事件
		for(var i=0;i<lis.length;i++){
			// 如果这两个值相等就执行播放
			if(this==lis[i]){
				// 首先先添加class绑定到这个获取到的li标签中
				lis[i].className='sty';
				// console.log('ado_src------------'+$('#ado').attr("src"))
				// console.log('arr[i]src----------'+arr[i])
				// 判断如果获取到的地址相等就跳过这个判断语句，如果不想等就进入这个循环语句，从而获得地址相等，然后继续向下执行
				if($('#ado').attr("src") != arr[i]){
	                ado.src=arr[i];
	            }
	            // paused判断这个值是否播放如果播放再点击就是暂停。
				if(ado.paused){
					// 播放音乐
					ado.play();
					// 如果播放了就将这个图片，修改成播放的图片，eq(i)，是用来获取这个图片对应的路径的
					$('.icon-img').eq(i).attr('src','image/moon_puse.png');
				}else{
					// 关闭音乐
					ado.pause();
					// 如果关闭则移除这个class
					lis[i].className="";
				}
			}else{
				// 上方的判断  如果这个路径不存在则直接输入空值
				lis[i].className="";
			}
		}		
	}
}
</script>